<script src="__CDN__/assets/libs/jquery/dist/jquery.min.js"></script>
<script src="__CDN__/assets/addons/tongcheng/js/vue.js"></script>
<link rel="stylesheet" type="text/css" href="__CDN__/assets/addons/tongcheng/css/common.css"></link>

<!--<div class="alert alert-info-light" style="margin-bottom:10px;">
  <b>提示：</b>用户配送距离超出配置的最大距离规则时，将无法配送（前端提示：距离超出配送范围）。
</div>-->

<div id="app">
  <form id="edit-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">
    <div class="form-group hide">
      <label class="control-label col-xs-12 col-sm-2">{:__('Module_id')}:</label>
      <div class="col-xs-12 col-sm-8">
        <input id="c-module_id" data-rule="required" data-source="tongcheng/module/index" class="form-control selectpage"
               name="row[module_id]" type="text" value="{$row.module_id|htmlentities}" disabled>
      </div>
    </div>

    <div class="form-group">
      <label class="control-label col-xs-12 col-sm-2">{:__('Open_surcharge')}:</label>
      <div class="col-xs-12 col-sm-8 m-t-5">
        <input id="c-open_surcharge" name="row[open_surcharge]" type="hidden" value="{$row.open_surcharge}">
        <a href="javascript:;" data-toggle="switcher" class="btn-switcher" data-input-id="c-open_surcharge" data-yes="1"
           data-no="0">
          <i class="fa fa-toggle-on text-success {eq name=" $row.open_surcharge" value="0"}fa-flip-horizontal text-gray{/eq}
          fa-2x"></i>
        </a>
      </div>
    </div>

    <div class="form-group">
      <label class="control-label col-xs-12 col-sm-2">里程配置:</label>
      <div class="col-xs-12 col-sm-10">
        <input id="c-surcharge_config" name="row[surcharge_config]" type="hidden" value='{:json_encode($row.surcharge_config)}'>

        <div v-for="(item, index) in surcharge_config" :key="index">

          <div class="row m-t-10">
            <div class="col-xs-10 col-sm-10">
              <div class="input-group">
                <input :name="'row[surcharge_config][' + index + '][name]'" type="text" class="form-control" v-model="item.name" placeholder="收费项名称">
                <div class="input-group-addon">时间：</div>
                <input :name="'row[surcharge_config][' + index + '][start]'" type="text" class="form-control datetimepicker" data-date-format='HH:mm:ss' v-model="item.start">
                <div class="input-group-addon">至</div>
                <input :name="'row[surcharge_config][' + index + '][end]'" type="text" class="form-control datetimepicker" data-date-format='HH:mm:ss' v-model="item.end">
                <div class="input-group-addon">内，收取</div>
                <input :name="'row[surcharge_config][' + index + '][fee]'" type="number" step="0.01" min="0" class="form-control" v-model="item.fee" style="width: ">
                <div class="input-group-addon">元</div>
                <div class="input-group-addon">
                  <input :id="'c-open_surcharge' + index" :name="'row[surcharge_config][' + index + '][status]'" type="hidden" v-model="item.status">
                  <a href="javascript:;" data-toggle="switcher" class="btn-switcher" :data-input-id="'c-open_surcharge' + index" data-yes="1"
                     data-no="0">
                    <i class="fa fa-toggle-on text-success {eq name=" $row.open_surcharge" value="0"}fa-flip-horizontal text-gray{/eq}
                    fa-2x"></i>
                  </a>
                  <!--<input :name="'row[surcharge_config][' + index + '][status]'" type="checkbox" v-model="item.status"> 开启-->
                </div>
              </div>
              <div>

              </div>
            </div>

            <div class="col-xs-2 col-sm-2" v-if="index > 0">
              <span class="btn btn-sm btn-danger" @click="remove(index)"><i class="fa fa-times"></i></span>
            </div>
          </div>
        </div>

        <div class="m-t-10">
          <a href="javascript:;" class="btn btn-sm btn-success" @click="add()"><i class="fa fa-plus"></i> 追加</a>
        </div>
      </div>

    </div>

    <div class="form-group layer-footer">
      <label class="control-label col-xs-12 col-sm-2"></label>
      <div class="col-xs-12 col-sm-8">
        <button type="submit" class="btn btn-primary btn-embossed disabled">{:__('OK')}</button>
        <button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button>
      </div>
    </div>
  </form>
</div>

<script>
  var valid_result = false;
  var _surcharge_config = '{:json_encode($row.surcharge_config)}';//$('#c-surcharge_config').val()
  var _controller = null
  var _form = null

  var app = new Vue({
    el: '#app',
    data: {
      surcharge_config: [],
    },
    created() {
      let surcharge_config = []
      if (_surcharge_config) {
        surcharge_config = JSON.parse(_surcharge_config)
      }
      if (!surcharge_config) {
        this.surcharge_config = []
        // this.surcharge_config.push({
        //   start: 0,
        //   end: 5,
        //   fee: 1,
        // })
      } else {
        this.surcharge_config = surcharge_config
      }
      console.log('this.surcharge_config', this.surcharge_config, surcharge_config, _surcharge_config)

      this.getForm()
    },
    methods: {
      getForm() {
        var timer = setInterval(() => {
          if (_form) {
            clearInterval(timer);
            console.log('_form3', _form);
            this.bindForm();
          }
        }, 500);
      },
      bindForm() {
        _form.api.bindevent($("form[role=form]"), function(data, ret){
          console.log('bindevent', data, ret);
          if (ret.code == 1) {
            Fast.api.close(data);
          }
          return false;
        });
      },
      // 加规则
      add() {
        this.surcharge_config.push({
          name: '',
          start: '',
          end: '',
          fee: 0,
          status: 0,
        })

        if (_controller) {
          console.log('trigger bindevent', _controller.api)
          // _controller.api.bindevent();
          setTimeout(() => {
            _controller.api.bindevent();
          }, 500);
        }
      },
      remove(index) {
        this.surcharge_config.splice(index, 1)
      },

      // 验证
      valid() {
        console.log('trigger valid')
        if (!$('#c-open_surcharge').val()) {
          valid_result = true
          return true
        }

        if (this.surcharge_config.length === 0) {
          Fast.api.msg('请配置完整的特殊时段规则')
          valid_result = false
          return false
        }

        valid_result = true
      }
    }
  })
</script>
